<template>
	<div class="tabsBox d-flex m-b20">
		<div
			class="tabsItem"
			:class="item.id == state.tabId ? 'tabsItemHover' : ''"
			v-for="item in tabsList"
			:key="item.id"
			@click="state.tabId = item.id"
		>
			{{ item.name }}
		</div>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue";

const state = reactive({
	tabId: "1",
});
const tabsList = ref([
	{
		name: "基本信息",
		id: "1",
	},
	{
		name: "项目流程图",
		id: "2",
	},
	{
		name: "项目实施情况",
		id: "3",
	},
	{
		name: "项目资料成果",
		id: "4",
	},
	{
		name: "项目会议记录",
		id: "5",
	},
	{
		name: "项目资料监督",
		id: "6",
	},
]);

const handel = () => {};
</script>
<style lang="scss" scoped>
.tabsBox {
	margin-bottom: 30px;
	.tabsItem {
		padding: 0 30px;
		text-align: center;
		line-height: 40px;
		height: 40px;
		border: 1px solid #ccc;
		margin-right: 20px;
		border-radius: 5px;
		color: #ccc;
		cursor: pointer;
	}
	.tabsItemHover {
		border: 1px solid #fc702b;
		color: #fc702b;
		background: #fff8f6;
	}
}
</style>
